<template>
  <div class="list">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        v-for="item in categroies"
        :key="item.id"
        :title="item.name + `(${item.total})`"
      />
    </van-sidebar>
    <!-- 
      v-model 表示加载状态，当滚动条触底的时候会设置它的值为true
      finished 表示是否加载完成，当数据全部加载完成之后会设置它为true，以后再次触底就不会触发load事件
      load 表示滚动条触底时候的事件
     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadData"
      class="container"
    >
      <van-card
        v-for="item in list"
        :key="item.id"
        :num="item.amount"
        :price="item.price.toFixed(2)"
        :title="item.name"
        :thumb="item.coverImage | dalImg"
        @click-thumb="toDetail(item)"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">按钮</van-button>
          <van-button size="mini">按钮</van-button>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { loadProductsAPI } from "../service/products";
import { loadCategoriesAPI } from "../service/categories";
export default {
  name: "List",
  data() {
    return {
      activeKey: 0,
      list: [],
      page: 1,
      loading: false, // 加载状态,是否加载中，滚动到底部的时候设置 loading 为 true
      finished: false, // 是否加载完成，true 表示加载完成
      pages: 1, // 总页数
      categroies: [],
    };
  },
  created() {
    // this.loadData();
    this.loadCategories();
  },
  methods: {
    toDetail(item) {
      this.$router.push({
        name: "Detail",
        params: {
          id: item.id,
        },
      });
    },
    async loadData() {
      // this.$route.query.t 这个参数是主页跳转到列表页  显示对应的商品分类的商品列表
      const res = await loadProductsAPI(this.page, this.$route.query.t);
      this.page++;
      this.pages = res.pages; //  设置总页数变量  res.pages 服务端返回的
      this.list.push(...res.data);
      this.loading = false;
      // 当页码大于总页数的时候设置 finished为true，表示加载完成
      if (this.page > this.pages) {
        this.finished = true;
      }
    },
    // // 点击右侧侧边栏，左侧显示对应商品
    // async toggle() {
    //   const res = await loadProductsAPI(this.$route.query.t);
    //   this.list = res.data;
    // },
    // // query: { t: item.id }

    // 显示每个商品分类下商品的个数
    async loadCategories() {
      const resCategories = await loadCategoriesAPI();
      const allProducts = [];
      resCategories.data.forEach((item) => {
        allProducts.push(loadProductsAPI(1, item.id));
      });
      this.categroies = resCategories.data.map((item) => {
        return {
          ...item,
          total: 0,
        };
      });
      //  Promise.all 可以接收一个Promise 组成的数组做为参数
      // 当数组中的所有Promsie都成功之后触发，返回的结果为每一个 Promise操作成功的结果组成的数组
      Promise.all(allProducts).then((res) => {
        res.forEach((item, index) => {
          this.categroies[index].total = item.total;
        });
      });
    },
  },
};
</script>

<style scoped>
.list {
  display: flex;
}
.container {
  flex: 1;
  overflow: auto;
}
</style>
